// 实现图片懒加载的功能---参照网上的自己进行封装--结合vue的自定义的指令,IntersectionObserver
import Vue from 'vue'

const lazySrc = lazyLoad({
  lazyAtrr: 'lazy-src'
  // errorPath: ''
})

function lazyLoad (params) {
  const atrr = params.lazyAtrr || 'lazy'
  // 更新整个文档的懒加载节点
  // function update () {
  //   const els = document.querySelectorAll(`img[${atrr}]`)
  //   // console.log(els)
  //   els.forEach(item => {
  //     // console.log(item)
  //     // 观察每一项
  //     // observer.observe(item)
  //   })
  // }

  const observer = new IntersectionObserver(function (entries, self) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target // img Dom
        const src = img.getAttribute(atrr) // 实际的url
        if (src) {
          img.src = src
          img.removeAttribute(atrr)
        }
        // 解除观察
        self.unobserve(entry.target)
      }
    })
  })

  // update()

  return {
    observer
    // update
  }
}

Vue.directive('lazy', {
  inserted (el, binding) {
    el.setAttribute('lazy-src', binding.value) // 跟上面的对应
    lazySrc.observer.observe(el) // 观察每一项
    // lazyLoad({
    //   lazyAtrr: 'lazy-src'
    //   // errorPath: ''
    // })
  }
})
